<template>
  <mt-navbar title="线索签约"> </mt-navbar>
  <view class="safety-150">
    <view class="forms pt-16rpx">
      <uv-form ref="formRef" label-position="left" label-width="200rpx" :border-bottom="false" :model="modelForm" :rules="rules">
        <view class="bg-#ffffff">
          <view :class="{ 'no-border': modelForm.rebateFlag === '0' }">
            <uv-form-item label="是否返佣：" prop="rebateFlag" required>
              <uv-radio-group v-model="modelForm.rebateFlag" @change="handleRebateChange">
                <uv-radio :custom-style="{ margin: '8px' }" label="是" name="1"> </uv-radio>
                <uv-radio :custom-style="{ margin: '8px' }" label="否" name="0"> </uv-radio>
              </uv-radio-group>
            </uv-form-item>
          </view>
          <view v-if="modelForm.rebateFlag === '1'">
            <uv-form-item label="成交金额：" prop="transactionAmount" required>
              <view class="flex-1 min-w-0">
                <uv-input
                  v-model="modelForm.transactionAmount"
                  maxlength="10"
                  placeholder="请输入成交金额"
                  border="none"
                  clearable
                  @blur="handlePosition(200)"
                ></uv-input>
              </view>
              <text class="text-24rpx text-#1C213E pl-24rpx" style="border-left: 2rpx solid #e6e6e6">元</text>
            </uv-form-item>
            <view class="no-border">
              <uv-form-item label="返佣金额：" prop="noAgentRebateAmount" required>
                <view class="flex-1 min-w-0">
                  <uv-input
                    v-model="modelForm.noAgentRebateAmount"
                    maxlength="10"
                    placeholder="请输入返佣金额"
                    border="none"
                    clearable
                    @blur="handlePosition(200)"
                  ></uv-input>
                </view>
                <text class="text-24rpx text-#1C213E pl-24rpx" style="border-left: 2rpx solid #e6e6e6">元</text>
              </uv-form-item>
            </view>
          </view>
        </view>

        <view class="bg-#ffffff no-border mt-16rpx">
          <uv-form-item label="上传合同：" label-position="top" prop="contractUrl" required>
            <view class="w-full pt-12rpx">
              <mt-upload-file ref="uploadRef" v-model="modelForm.contractUrl" oss-path="clue"></mt-upload-file>
            </view>
          </uv-form-item>
        </view>
      </uv-form>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button type="info" class="w-210rpx" :shake="false" @click="back">取消</mt-button>
      <mt-button class="w-450rpx" @click="handleSubmit">确定</mt-button>
    </view>
  </view>
</template>

<script setup>
import { cluesign } from '@/subClue/api/index';
import { numberCheck } from '@/utils/regular';

const formRef = ref();
const modelForm = ref({
  clueId: '',
  rebateFlag: '1',
  transactionAmount: '',
  noAgentRebateAmount: '',
  contractUrl: []
});
const rules = {
  rebateFlag: {
    type: 'string',
    required: true,
    message: '请选择是否返佣',
    trigger: ['change']
  },
  transactionAmount: [
    {
      type: 'string',
      required: true,
      message: '请输入成交金额',
      trigger: ['blur']
    },
    {
      validator: (rule, value, callback) => {
        return numberCheck(value);
      },
      message: '只能输入数字',
      trigger: ['blur']
    }
  ],
  noAgentRebateAmount: [
    {
      type: 'string',
      required: true,
      message: '请输入返佣金额',
      trigger: ['blur']
    },
    {
      validator: (rule, value, callback) => {
        return numberCheck(value);
      },
      message: '只能输入数字',
      trigger: ['blur']
    }
  ],
  contractUrl: {
    type: 'array',
    required: true,
    message: '请上传合同',
    trigger: ['change']
  }
};

const uploadRef = ref();
function handlePosition(timer = 0) {
  setTimeout(() => {
    uploadRef.value.changePosition();
  }, timer);
}

function handleRebateChange() {
  modelForm.value.transactionAmount = '';
  modelForm.value.noAgentRebateAmount = '';
  handlePosition();
}

function handleSubmit() {
  formRef.value
    .validate()
    .then(() => {
      const params = JSON.parse(JSON.stringify(modelForm.value));
      params.transactionAmount = params.transactionAmount * 1000;
      params.noAgentRebateAmount = params.noAgentRebateAmount * 1000;

      cluesign(params).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功',
          duration: 1000
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      });
    })
    .catch((err) => {
      handlePosition();
    });
}

function back() {
  uni.navigateBack();
}

onLoad((options) => {
  modelForm.value.clueId = options.id;
});
</script>

<style lang="scss" scoped>
.forms {
  :deep(.uv-input) {
    height: 50rpx;
    padding: 0 12rpx !important;
  }
  :deep(.uv-form) {
    .no-border {
      .uv-form-item {
        border-bottom: none;
      }
    }
    .uv-form-item {
      font-size: 28rpx;
      margin: 0 32rpx;
      border-bottom: 2rpx solid #e4e4e4;
      .uv-form-item__body {
        padding: 30rpx 0;
      }
      .uv-form-item__body__left__content__label {
        font-size: 28rpx;
        color: #727687;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
